<template>
	<a-drawer :title="title" :maskClosable="true" :width="drawerWidth" placement="right" :closable="true" @close="handleCancel" :visible="visible" style="height: 100%;overflow: auto;padding-bottom: 53px;">

		<template slot="title">
			<div style="width: 100%;">
				<span>{{ title }}</span>
				<span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
					<a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px">
					</a-button>
				</span>
			</div>
		</template>

		<a-spin :spinning="confirmLoading">
			<a-form :form="form">
				<a-form-item label="级联名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input placeholder="级联名称" v-decorator.trim="[ 'name', validatorRules.notBlank]" />
				</a-form-item>
				<a-form-item label="外域服务国标编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input placeholder="外域服务国标编码" v-decorator.trim="[ 'serverGBId', validatorRules.notBlank]" />
				</a-form-item>
				<a-form-item label="外域服务国标域" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input placeholder="外域服务国标域" v-decorator.trim="[ 'serverGBDomain', validatorRules.notBlank]" />
				</a-form-item>
				<a-form-item label="外域服务IP" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input placeholder="外域服务IP" v-decorator.trim="[ 'serverIP', validatorRules.notBlank]" />
				</a-form-item>
				<a-form-item label="外域服务端口" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input placeholder="外域服务端口" v-decorator.trim="[ 'serverPort', validatorRules.notBlank]" />
				</a-form-item>
				<a-form-item label="外域认证密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input placeholder="外域认证密码" v-decorator.trim="[ 'password', validatorRules.notBlank]" />
				</a-form-item>
				<a-form-item label="注册周期(秒)" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input placeholder="注册周期(秒)" v-decorator.trim="[ 'expires', validatorRules.notBlank]" />
				</a-form-item>
				<a-form-item label="心跳周期(秒)" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input placeholder="心跳周期(秒)" v-decorator.trim="[ 'keepTimeout', validatorRules.notBlank]" />
				</a-form-item>
				<a-form-item label="信令传输" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-select placeholder="请选择" v-decorator.trim="[ 'transport', validatorRules.notBlank]" default-value="TCP">
						<!-- <a-select-option value="UDP">UDP</a-select-option> -->
						<a-select-option value="TCP">TCP</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item label="字符集" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-select placeholder="请选择" v-decorator.trim="[ 'characterSet', validatorRules.notBlank]">
						<a-select-option value="GB2312">GB2312</a-select-option>
						<a-select-option value="UTF-8">UTF-8</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item label="启用/禁用" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-select placeholder="请选择" v-decorator.trim="[ 'enable', validatorRules.notBlank]">
						<a-select-option value="1">是</a-select-option>
						<a-select-option value="0">否</a-select-option>
					</a-select>
				</a-form-item>
			</a-form>
		</a-spin>

		<div class="drawer-bootom-button" v-show="!disableSubmit">
			<a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
				<a-button style="margin-right: .8rem">取消</a-button>
			</a-popconfirm>
			<a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
		</div>
	</a-drawer>
</template>

<script>
	import pick from 'lodash.pick'
	import {
		postAction
	} from '@/api/manage'
	export default {
		name: "PlatformEditModal",
		components: {},
		data() {
			return {
				devId: undefined, 
				modelList: [],
				ctrlProtocolList: [],
				streamOutputProtocolList: [],
				streamIutputProtocolList: [],
				model: {},
				form: this.$form.createForm(this),
				validatorRules: {
					notBlank: {
						rules: [{
							required: true,
							message: '请输入必填项!'
						}]
					}
				},
				title: "编辑",
				visible: false,
				modaltoggleFlag: true,
				confirmDirty: false,
				disableSubmit: false,
				labelCol: {
					xs: {
						span: 24
					},
					sm: {
						span: 5
					},
				},
				wrapperCol: {
					xs: {
						span: 24
					},
					sm: {
						span: 16
					},
				},
				modalWidth: 800,
				drawerWidth: 700,
				confirmLoading: false,
			}
		},
		created() {
		},
		computed: {
		},
		methods: {
			//窗口最大化切换
			toggleScreen() {
				if (this.modaltoggleFlag) {
					this.modalWidth = window.innerWidth;
				} else {
					this.modalWidth = 800;
				}
				this.modaltoggleFlag = !this.modaltoggleFlag;
			},
			show(record) {
				console.log(JSON.stringify(record))
				this.ctrlProtocolList = record.ctrlProtocolGroup.split(";");
				this.streamOutputProtocolList = record.streamOutputProtocolGroup.split(";");
				this.streamIutputProtocolList = record.streamIutputProtocolGroup.split(";");
				// 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
				this.resetScreenSize(); 
				this.form.resetFields();
				//绑定数据
				this.model = Object.assign({}, record);
				this.$nextTick(() => {
					this.form.setFieldsValue(pick(this.model, 'devCode','modelId','typeDesc','ctrlProtocol',
					'devAddr','httpPort','sipAddr','sipPort','userName','userPassword','encodeParam','streamOutputProtocol',
					'decodeParam','streamIutputProtocol','name','devDesc','location','used','online','autoCreatePeripheral',
					'timeSync','ntpAddr','ntpPort'))
				});
				this.visible = true;
			},
			close() {
				this.$emit('close');
				this.visible = false;
				this.disableSubmit = false;
			},
			handleSubmit() {//编辑设备
				const that = this;
				// 触发表单验证
				this.form.validateFields((err, values) => {
					if (!err) {
						that.confirmLoading = true;
						let formData = Object.assign(this.model, values);
						console.log(formData)
						postAction("/dev/edit", formData).then((res) => {
							if (res.code == "00000") {
								//子类绑定父类引组件的方法
								that.$emit("ok")
								that.$message.success("操作成功");
							} else {
								that.$message.warning("操作失败" + res.msg);
							}
						}).finally(() => {
							that.confirmLoading = false;
							that.close();
						})
					}
				})
			},
			handleCancel() {
				this.close()
			},
			// 根据屏幕变化,设置抽屉尺寸
			resetScreenSize() {
				let screenWidth = document.body.clientWidth;
				if (screenWidth < 500) {
					this.drawerWidth = screenWidth;
				} else {
					this.drawerWidth = 700;
				}
			}
		}
	}
</script>

<style scoped>
	.avatar-uploader>.ant-upload {
		width: 104px;
		height: 104px;
	}
	.ant-upload-select-picture-card i {
		font-size: 49px;
		color: #999;
	}
	.ant-upload-select-picture-card .ant-upload-text {
		margin-top: 8px;
		color: #666;
	}
	.ant-table-tbody .ant-table-row td {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.drawer-bootom-button {
		position: absolute;
		bottom: -8px;
		width: 100%;
		border-top: 1px solid #e8e8e8;
		padding: 10px 16px;
		text-align: right;
		left: 0;
		background: #fff;
		border-radius: 0 0 2px 2px;
	}
</style>
